<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/rem.js"></script>
    <link rel="stylesheet" href="../css/projectCon.css">
    <link rel="stylesheet" href="../css/index-rem.css">
    <title>华为商城</title>
</head>

<body>
    <!-- 顶部工具栏 begin-->
    <section class="top">
        <!-- 头部搜索栏 being -->
        <header class="header-bar">
            <div class="logo">
                <img src="../img/logo_vmall.png" alt="logo">
            </div>
            <div class="search">
                <span></span>
                <input type="text" value="畅享平板2">
            </div>
            <div class="user">
                <div class="message">
                    <a href="javascript:;"></a>
                </div>
                <div class="login">
                    <span>登录</span>
                </div>
            </div>
        </header>
        <!-- 头部搜索栏 end -->
        <!-- 二级导航栏 beging -->
        <nav class="nav-menu">
            <ul>
                <li class="con">
                    <a href="javascipt:;">推荐</a>
                </li>
                <li>
                    <a href="javascipt:;">华为专区</a>
                </li>
                <li>
                    <a href="javascipt:;">荣耀专区</a>
                </li>
                <li>
                    <a href="javascipt:;">P40系列</a>
                </li>
                <li>
                    <a href="javascipt:;">安心居家</a>
                </li>
                <li>
                    <a href="javascipt:;">拼团</a>
                </li>
            </ul>
            <span class="more-arrow"></span>
        </nav>
        <!-- 二级导航栏 end -->
    </section>
    <!-- 顶部工具栏 end-->
    <div class="container">
        <!-- 轮播图 begin-->
        <section class="banner">
            <ul>
                <li> <img src="../img/banner2.jpg" alt=""></li>
                <li> <img src="../img/banner1.jpg" alt=""></li>
            </ul>


            <div class="point-btn">
                <ul>
                    <li class="con"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </section>
        <!-- 轮播图 end-->
        <!-- 栏目菜单导航 begin -->
        <section class="category">
            <ul>
                <li>
                    <a href="javascript:;">
                        <div class="c-icon"></div>
                        <p>会员领券</p>
                    </a>

                </li>
                <li>
                    <a href="javascript:;">
                        <div class="c-icon"></div>
                        <p>华为数码</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="c-icon"></div>
                        <p>直播频道</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="c-icon"></div>
                        <p>新品上市</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="c-icon"></div>
                        <p>以旧换新</p>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="c-icon"></div>
                        <p>邀请有礼</p>
                    </a>
                </li>

            </ul>
            <div class="menu-index">
                <span class="con">1</span>
                <span>2</span>
            </div>
        </section>
        <!-- 栏目菜单导航 end-->
        <!-- 商城头条 begin -->
        <section class="headerline">
            <div class="hl-icon">
                <a href="javascript:;">
                    <img src="../img/logo_wapHeadNews.png" alt="">
                </a>

            </div>
            <div class="hl-content">
                <ul>
                    <li>
                        <span></span>
                        <a href="javascript:;">海雀AI摄像头云台超清版评ssss，性价比很不错</a>
                    </li>
                    <li>
                        <span></span>
                        <a href="javascript:;">海雀AI摄像头云台超清版评ssss，性价比很不错</a>
                    </li>
                </ul>
            </div>
            <div class="hl-more">
                <a href="javascipt:;">更多</a>
            </div>
        </section>
        <!-- 商城头条 end -->
        <!-- 秒杀 begin -->
        <section class="seckill">
            <h2>
                <span>限时购</span>
                <span class="seckill-icon"></span>
                <span>12:33:40</span>
                <span class="seckill-end">后结束</span>
            </h2>
            <div class="seckillSlider">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <div class="seckill-img">
                                <img src="../img/seckill-1.png" alt="">
                                <p>荣耀平板6</p>
                            </div>
                            <p>预定最高省700</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="seckill-img">
                                <img src="../img/seckill-2.png" alt="">
                                <p>荣耀Play4 Pro</p>
                            </div>
                            <p>￥2489 <del>￥2899</del></p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="seckill-img">
                                <img src="../img/seckill-1.png" alt="">
                                <p>荣耀平板6</p>
                            </div>
                            <p>预定最高省700</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="seckill-img">
                                <img src="../img/seckill-1.png" alt="">
                                <p>荣耀平板6</p>
                            </div>
                            <p>预定最高省700</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="seckill-img">
                                <img src="../img/seckill-1.png" alt="">
                                <p>荣耀平板6</p>
                            </div>
                            <p>预定最高省700</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="seckill-img">
                                <img src="../img/seckill-1.png" alt="">
                                <p>荣耀平板6</p>
                            </div>
                            <p>预定最高省700</p>
                        </a>
                    </li>
                </ul>
            </div>
        </section>
        <!-- 秒杀 end -->
        <!-- 促销海报 begin -->
        <section class="product-poster">
            <ul>
                <li class="normal">
                    <div>
                        <a href="javascript:;"><img src="../img/fallbanner1.png" alt=""></a>
                    </div>
                    <div>
                        <div>
                            <a href="javascript:;"><img src="../img/fallbanner2.jpg" alt=""></a>
                        </div>
                        <div>
                            <a href="javascript:;"><img src="../img/fallbanner2.jpg" alt=""></a>
                        </div>
                    </div>
                </li>
                <li class="normal">
                    <div>
                        <a href="javascript:;"><img src="../img/fallbanner3.jpg" alt=""></a>
                    </div>
                    <div>
                        <a href="javascript:;"><img src="../img/fallbanner4.jpg" alt=""></a>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="javascript:;">
                            <img src="../img/fall-last.png" alt="">
                            <div class="p-info">
                                <h3 class="p-name">华为畅享Z5G</h3>
                                <p class="p-promotion">最高省50+赠耳机</p>
                                <p class="p-price">￥1699</p>
                            </div>
                        </a>
                    </div>
                    <div>
                        <a href="javascript:;">
                            <img src="../img/fall-last.png" alt="">
                            <div class="p-info">
                                <h3 class="p-name">华为畅享Z5G</h3>
                                <p class="p-promotion">最高省50+赠耳机</p>
                                <p class="p-price">￥1699</p>
                            </div>
                        </a>
                    </div>
                    <div>
                        <a href="javascript:;">
                            <img src="../img/fall-last.png" alt="">
                            <div class="p-info">
                                <h3 class="p-name">华为畅享Z5G</h3>
                                <p class="p-promotion">最高省50+赠耳机</p>
                                <p class="p-price">￥1699</p>
                            </div>
                        </a>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 促销海报 end -->
        <!-- 产品推荐 begin -->
        <section class="goods">
            <header>
                <h2>精品推荐</h2>
            </header>
            <div class="goods-list">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <div class="goods-img">
                                <p class="tag">818爆款</p>
                                <img src="../img/pd2.png" alt="">
                                <p>6期免息|赠多重好礼</p>
                            </div>
                            <p class="p-name">HUAWEI nova 7 5G</p>
                            <p class="p-price">￥2999</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="goods-img">
                                <img src="../img/pd1.png" alt="">
                                <p>6期免息|赠多重好礼</p>
                            </div>
                            <p class="p-name">HUAWEI nova 7 5G</p>
                            <p class="p-price">￥2999</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="goods-img">
                                <img src="../img/pd1.png" alt="">
                                <p>6期免息|赠多重好礼</p>
                            </div>
                            <p class="p-name">HUAWEI nova 7 5G</p>
                            <p class="p-price">￥2999 <del>￥3299</del></p>
                        </a>
                    </li>
                </ul>
            </div>
        </section>
        <!-- 产品推荐 end -->
        <!-- 产品列表 begin -->
        <section class="goods">
            <header>
                <h2>手机</h2>
            </header>
            <div class="goods-list">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <div class="goods-img">
                                <p class="tag">818爆款</p>
                                <img src="../img/pd2.png" alt="">
                                <p>6期免息|赠多重好礼</p>
                            </div>
                            <p class="p-name">HUAWEI nova 7 5G</p>
                            <p class="p-price">￥2999</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="goods-img">
                                <img src="../img/pd1.png" alt="">
                                <p>6期免息|赠多重好礼</p>
                            </div>
                            <p class="p-name">HUAWEI nova 7 5G</p>
                            <p class="p-price">￥2999</p>
                        </a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="javascript:;">
                            <div class="goods-img">
                                <p class="tag">818爆款</p>
                                <img src="../img/pd2.png" alt="">
                                <p>6期免息|赠多重好礼</p>
                            </div>
                            <p class="p-name">HUAWEI nova 7 5G</p>
                            <p class="p-price">￥2999</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="goods-img">
                                <img src="../img/pd1.png" alt="">
                                <p>6期免息|赠多重好礼</p>
                            </div>
                            <p class="p-name">HUAWEI nova 7 5G</p>
                            <p class="p-price">￥2999</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="goods-img">
                                <img src="../img/pd1.png" alt="">
                                <p>6期免息|赠多重好礼</p>
                            </div>
                            <p class="p-name">HUAWEI nova 7 5G</p>
                            <p class="p-price">￥2999</p>
                        </a>
                    </li>
                </ul>
            </div>
        </section>
        <!-- 产品列表 end -->
    </div>
    <!-- 底部导航 begin -->
    <section class="nav-bar">
        <ul>
            <li>
                <a href="javascirpt:;">
                    <i></i>
                    <b>首页</b>
                </a>
            </li>
            <li>
                <a href="../html/category.html">
                    <i></i>
                    <b>分类</b>
                </a>
            </li>
            <li>
                <a href="../html/found.html">
                    <i></i>
                    <b>发现</b>
                </a>
            </li>
            <li>
                <a href="javascirpt:;">
                    <i></i>
                    <b>购物车</b>
                </a>
            </li>
            <li>
                <a href="javascirpt:;">
                    <i></i>
                    <b>我的</b>
                </a>
            </li>
        </ul>
    </section>
    <!-- 底部导航 end -->
</body>

</html>